<template>
  <div class="person">
    <!-- v-model 既可以显示到页面，也能让页面的修改响应回来 -->
    姓：<input type="text" v-model="firstName"><br>
    名：<input type="text" v-model="lastName"><br>
    全名：<span>{{ fullName }}</span><br>
    <!-- 调用changeName修改全名 -->
    <button @click="changeName">修改全名</button>
  </div>
</template>
  
<script lang="ts" setup name="Person">
  import { ref ,computed} from 'vue';
  let firstName=ref('zhang');
  let lastName=ref('san');
  //这里的fullName是只读属性不能修改
  // let fullName=computed(() => {
  //   //首字母大写的全名
  //   return firstName.value.slice(0,1).toUpperCase()
  //    + firstName.value.slice(1) + lastName.value;
  // });

  //可读可写的fullName属性
  let fullName=computed({
    get(){
      return firstName.value.slice(0,1).toUpperCase()
      + firstName.value.slice(1) + '-' + lastName.value;
    },
    set(val){
      const [str1,str2]=val.split('-');
      firstName.value=str1;
      lastName.value=str2;
    }
  })

  //修改全名的方法
  function changeName() {
    fullName.value = 'li-si';
  }


  // 计算属性是响应式的，数据变化会自动更新
</script>

<style scoped>
  .person {
      background-color: skyblue;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
  }
  button {
      margin: 0 5px;
  }
  li {
      font-size: 20px;
  }
</style>